<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"  http-equiv="refresh" content="50">
<title>环境监测实时显示界面</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background:
		url("https://hbimg.huabanimg.com/a2a94c344b355ad50c41505a5378b65641774e6e2a8bf-aqCpYB_fw658")
		no-repeat;
	background-size: 100%;
}

#box {
	width: 894px;
	height: 410px;
	background: rgba(255, 255, 255, .2);
	border-radius: 10px;
	margin: 40px 0px 0px 95px;
}

#box #echarts {
	width: 850px;
	height: 380px;
	margin-top: -50px;
}

#sunlight {
	width: 175px;
	height: 172px;
	type: "hidden";
	background: url("https://hbimg.huabanimg.com/71671f9e167f528e91fdfee4406d6c2b620e569c82c8-toWlsn_fw658");
		
		
	margin: -600px 0px 0px 1158px;
	background-size: cover
}

#boxs {
	width: 894px;
	height: 130px;
	margin-left: 95px;
	margin-top: 40px;
}

#boxs div {
	float: left;
}

#sunlight-desc {
	width: 440px;
	height: 370px;
	margin: 29px 0px 0px 1057px;
}

#sunlight-desc-box div {
	float: left;
	margin-top: -25px;
}

#sunlight-desc-box p {
	color: #fff;
	float: left;
	font-size: 20px;
	margin-top: 15px;
}
</style>
</head>
<body>

	<h1 style="text-align: center; color: #fff; margin-top: 25px;">
		星期<span id="cdy"></span>&nbsp;&nbsp;&nbsp;&nbsp;Tuesday <span
			id="date1"></span>/<span id="date2"></span>/<span id="date3"></span>
	</h1>
	<div id="box">
		<p
			style="color: #fff; font-size: 20px; text-align: center; margin-bottom: 15px; padding-top: 20px; font-weight: 500;">
			( 泓信 ) <span id="ssxs"></span>实时数据222 ( ug/m)
		</p>
		<div id="echarts"></div>
	</div>
	<div id="boxs">
		<div id="box1"
			style="width: 153px; height: 100%; background: rgba(255, 255, 255, .2); border-radius: 8px;">
			<p
				style="color: #fff; text-align: center; padding-top: 25px; font-weight: 500; font-size: 18px;">温度2℃</p>
			<p
				style="color: #fff; text-align: center; padding-top: 30px; font-weight: 500; font-size: 18px;"
				id="TEMP_Rtd">0</p>
		</div>
		<div id="box2"
			style="width: 153px; height: 100%; background: rgba(255, 255, 255, .2); border-radius: 8px; margin-left: 32px;">
			<p
				style="color: #fff; text-align: center; padding-top: 25px; font-weight: 500; font-size: 18px;">湿度
				%</p>
			<p
				style="color: #fff; text-align: center; padding-top: 30px; font-weight: 500; font-size: 18px;"
				id="HUMI_Rtd">0</p>
		</div>
		<div id="box3"
			style="width: 153px; height: 100%; background: rgba(255, 255, 255, .2); border-radius: 8px; margin-left: 32px;">
			<p style="color: #fff; text-align: center; padding-top: 25px; font-weight: 500; font-size: 18px;" id="vocname">
				V O C <span style="font-size: 14px;" >ppm</span>
			</p>
			<p style="color: #fff; text-align: center; padding-top: 30px; font-weight: 500; font-size: 18px;"
				id="VOC_Rtd">0</p>
		</div>
		<div id="box4"
			style="width: 153px; height: 100%; background: rgba(255, 255, 255, .2); border-radius: 8px; margin-left: 32px;">
			<p
				style="color: #fff; text-align: center; padding-top: 25px; font-weight: 500; font-size: 18px;">
				二氧化碳 <span style="font-size: 14px;">ppm</span>
			</p>
			<p
				style="color: #fff; text-align: center; padding-top: 30px; font-weight: 500; font-size: 18px;"
				id="CO2_Rtd">0</p>
		</div>
		<div id="box5"
			style="cursor: pointer; width: 153px; height: 100%; background: rgba(255, 255, 255, .2); border-radius: 8px; margin-left: 32px;">
			<p
				style="color: #fff; text-align: center; padding-top: 25px; font-weight: 500; font-size: 18px;">PM
				10ug/m</p>
			<p
				style="color: #fff; text-align: center; padding-top: 30px; font-weight: 500; font-size: 18px;"
				id="PM10_Rtd">0</p>
		</div>
	</div>
	<p
		style="color: #fff; margin-left: 95px; margin-top: 18px; font-size: 23px;">
		健康提醒:<span style="font-size: 22px;" id="ganmao">0</span> 
	</p>
	<div id="sunlight"></div>
	<div id="sunlight-desc">
		<p style="color: #fff; font-size: 22px; margin-top: 15px;">
			  <span id="temp1">0</span> 
		</p>
		<p style="color: #fff; font-size: 22px; margin-top: 15px;">
			  <span id="temp2">0</span> 
		</p> 
		<p style="color: #fff; font-size: 22px; margin-top: 15px;">
		       天气:  <span id="type">0</span>
		</p>
		<p style="color: #fff; font-size: 22px; margin-top: 15px;">
		       风力: <span id="fl">0</span>
		</p>
		<p
			style="color: #fff; font-size: 40px; font-weight: 800; margin-top: -95px; margin-left: 198px;"
			id="city">广州</p>
		<p style="color: #fff; font-size: 22px; margin-top: 55px;">--------------------------------------------</p>
		<div id="sunlight-desc-box">
			<div
				style="width: 68px; height: 30px; background: #05F47C; border-radius: 8px;"></div>
			<div
				style="width: 68px; height: 30px; background: #FFF45C; margin-left: 5px; border-radius: 8px;"></div>
			<div
				style="width: 68px; height: 30px; background: #F2914A; margin-left: 5px; border-radius: 8px;"></div>
			<div
				style="width: 68px; height: 30px; background: #FF0000; margin-left: 5px; border-radius: 8px;"></div>
			<div
				style="width: 68px; height: 30px; background: #8956A1; margin-left: 5px; border-radius: 8px;"></div>
			<div
				style="width: 68px; height: 30px; background: #440063; margin-left: 5px; border-radius: 8px;"></div>
			<!-- 文字部分 -->

			<div
				style="margin-top: 14px; color: #fff; border-radius: 8px; margin-left: 24px; writing-mode: vertical-rl;">优</div>
			<div
				style="margin-top: 14px; color: #fff; margin-left: 53px; writing-mode: vertical-rl;">良</div>
			<div
				style="margin-top: 14px; color: #fff; margin-left: 53px; writing-mode: vertical-rl;">轻度污染</div>
			<div
				style="margin-top: 14px; color: #fff; margin-left: 53px; writing-mode: vertical-rl;">中度污染</div>
			<div
				style="margin-top: 14px; color: #fff; margin-left: 53px; writing-mode: vertical-rl;">重读污染</div>
			<div
				style="margin-top: 14px; color: #fff; margin-left: 53px; writing-mode: vertical-rl;">严重污染</div>
			<p style="color: #fff; font-size: 22px; margin-top: 15px;">--------------------------------------------</p>
		</div>
	</div>

	<input type="hidden" id="inp">

	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">

	</script>
 
</body>
</html>